<?xml version="1.0" encoding="UTF-8"?>
<content type="LES"><lesson_id>932</lesson_id>
<was_chapter_id></was_chapter_id>
<keywords></keywords>
<childs_cnt>0</childs_cnt>
<is_childs>0</is_childs>
<sort>100</sort>
<timestamp_x>1406639966</timestamp_x>
<date_create>1406636855</date_create>
<created_user_name>(admin) Иван Иванов</created_user_name>
<created_by>1</created_by>
<active>Y</active>
<name>Форматирование текста</name>
<preview_picture></preview_picture>
<preview_text></preview_text>
<preview_text_type>text</preview_text_type>
<detail_text><![CDATA[<p>Визуальный редактор предоставляет различные средства форматирования текста. Опишем подробнее кнопки и выпадающие списки панели форматирования:</p>
 
<p><img src="cid:resources/res62/GGexy.G5XWY.format_panel.png" height="51" width="445"  /></p>
 
<h4>Стили шаблонов сайта</h4>
 
<p>При переходе к редактированию страницы из административного раздела в списке шаблонов <img src="cid:resources/res62/g3m72.OYzic.templates_panel.png" border="0" height="26" width="173"  /> будет выбран шаблон по умолчанию. Его таблица стилей (файл <b>styles.css</b>) будет подключена для использования для данной страницы. </p>
 
<p>Для каждого шаблона задается своя таблица стилей (файл <b>styles.css</b>). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.</p>
 
<p>Для каждого из стилей шаблона может быть задано название. В визуальном редакторе описанные стили могут выводится как с названиями, так и без них в зависимости от настроек <b>Визуального редактора</b> в модуле <b>Управление структурой</b>. </p>
 
<div class="hint"><strong>Примечание:</strong> Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название <b>styles.css</b> и содержит стили для представления внутреннего содержания страниц на сайте. Во втором &ndash; с именем <b>template_styles.css</b> &ndash; описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора. </div>
 
<br />
 
<div class="warning"> <strong>Внимание!</strong> Выпадающий список шаблонов <strong>не предназначен</strong> для подключения шаблона дизайна к текущей странице. Условия для использования шаблонов задаются в настройках сайта. Указанный выпадающий список используется только для переключения таблиц стилей и шаблонов визуальных компонентов при редактировании содержания страницы. 
  <p><img src="cid:resources/res62/VZVOZ.9hYNt.templates.png" height="142" width="244"  /></p>
 </div>
 
<h4>Работа со стилями</h4>
 
<p>Для каждого шаблона задается своя таблица стилей (файл <b>styles.css</b>), которые можно использовать для оформления текста. В визуальном редакторе описанные стили могут выводится как с названиями, так и без них в зависимости от настроек модуля <b>Управление структурой</b>. </p>
 
<p><img src="cid:resources/res62/RoBTr.jUNPO.styles.png" height="241" width="227"  /> </p>
 
<p>В выпадающем списке можно выбрать необходимый стиль для текста или другого элемента страницы. </p>
 
<p>Разработчики и администраторы сайтов, как люди технические, используют технически верные названия стилей на латинице. Такие названия стилей для контент-менеджеров могут быть не совсем удобны и понятны. Визуальный редактор допускает изменение названий стилей на кириллические. Если у вас недостаточно прав, обратитесь за помощью к администратору сайта.</p>
 
<p>Для изменения названий стилей:</p>
 
<ul> 
  <li>Откройте для редактирования используемый шаблон сайта.</li>
 
  <li>Перейдите на вкладку <b>Стили сайта</b>.</li>
 
  <li>В нижней части вкладки в области <b>Описания стилей</b> в поле <b>Имя стиля</b> введите действующее имя стиля. В поле <b>Название стиля</b> введите название стиля под которым вы хотите его видеть в визуальном редакторе.</li>
 
  <li>Нажмите кнопку <b>Еще</b>. Откроется еще одна строка в этой области.</li>
 
  <li>Повторите описанные выше действия для каждого из стилей, которые нуждаются в переименовании. 
    <p><img height="451" border="0" width="658" src="cid:resources/res62/wwqrD.PyO8t.styles_edit_11.png"  /></p>
   </li>
 
  <li>Сохраните внесенные изменения.</li>
 </ul>
 
<p>Теперь стили будут отображаться под выбранными вами названиями.</p>
 
<h4>Работа с заголовками</h4>
 
<p>В визуальном редакторе есть возможность управлять заголовками в тексте. Для этого существует выпадающий список, в котором можно выбрать нужное выделение заголовка: </p>
 
<p><img src="cid:resources/res62/1ofDO.XAOOz.headings.png" border="0" height="281" width="173"  /></p>
 
<p>Значение <b>Normal</b> из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.</p>

<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Таблица соответствий внешнего вида заголовка и его кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><table cellspacing="0" cellpadding="0" border="0"> 
  <tbody> 
    <tr><td bgcolor="#000000"> 
        <table cellspacing="1" cellpadding="5" border="0"> 
          <tbody> 
            <tr><td bgcolor="#ffffff"> 
                <h1>Heading 1</h1>
               </td><td bgcolor="#ffffff"><code>&lt;h1&gt;Heading 1&lt;/h1&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <h2>Heading 2</h2>
               </td><td bgcolor="#ffffff"><code>&lt;h2&gt;Heading 2&lt;/h2&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <h3>Heading 3</h3>
               </td><td bgcolor="#ffffff"><code>&lt;h3&gt;Heading 3&lt;/h3&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <h4>Heading 4</h4>
               </td><td bgcolor="#ffffff"><code>&lt;h4&gt;Heading 4&lt;/h4&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <h5>Heading 5</h5>
               </td><td bgcolor="#ffffff"><code>&lt;h5&gt;Heading 5&lt;/h5&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <h6>Heading 6</h6>
               </td><td bgcolor="#ffffff"><code>&lt;h6&gt;Heading 6&lt;/h6&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff"> 
                <pre>Preformatted</pre>
               </td><td bgcolor="#ffffff"><code>&lt;pre&gt;Preformatted&lt;/pre&gt;</code></td></tr>
           </tbody>
         </table>
       </td></tr>
   </tbody>
 </table></td></tr>
</tbody>
</table></div>
 

 
<h4>Шрифты</h4>
 
<p>В визуальном редакторе доступны следующие шрифты:</p>
 
<p><img src="cid:resources/res62/39yzJ.eKlrW.fonts.png" border="0" height="185" width="170"  /> </p>

<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание шрифта при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td> 
<pre class="syntax">&lt;font face=&quot;font_name&quot;&gt; TEXT &lt;/font&gt;</pre>
 
<p>где <b>font_name</b> заменяется на название выбранного шрифта из списка доступных: <b>Times New Roman</b>, <b>Courier</b>, <b>Arial</b>, <b>Tahoma</b>, <b>Verdana</b> или <b>Georgia</b>.</p></td></tr>
</tbody>
</table></div>

  
<p>Цвет фона текста задается по кнопке <img src="cid:resources/res62/bklTe.jU6B8.bgcolor.gif" border="0" height="20" width="20"  />.</p>

<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание цвета фона текста при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><p>Выполнение действия происходит с использованием стиля для тега <b>&lt;font&gt;</b>. Например, при редактировании в режиме кода при выделении фона текста желтым цветом код будет выглядеть так:</p>
 
<pre class="syntax">&lt;font style=&quot;BACKGROUND-COLOR: #ffff00&quot;&gt;ТЕКСТ&lt;/font&gt;<br /></pre></td></tr>
</tbody>
</table></div>

<p>Цвет самого текста задается по кнопке <img src="cid:resources/res62/EVHA2.l4NWx.fgcolor.gif" border="0" height="20" width="20"  />.</p>

<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание цвета текста при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><p>Это действие выполняется помощью атрибута color тега <b>&lt;font&gt;</b>. Например, при редактировании в режиме кода при выделении текста желтым цветом код будет выглядеть так:</p>
 
<pre class="syntax">&lt;font color=&quot;#3366ff&quot;&gt;ТЕКСТ&lt;/font&gt;<br /></pre></td></tr>
</tbody>
</table></div>

 
<h4>Размер шрифта</h4>
 
<p>В редакторе могут быть использованы следующие размеры шрифтов:</p>
 
<p><img src="cid:resources/res62/c5vRZ.KjR59.fontsize.png" border="0" height="296" width="271"  /> </p>
 
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Задание размера шрифта при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax">&lt;font size=&quot;size_number&quot;&gt;TEXT&lt;/font&gt;</pre>
 
<p>где size_number заменяется на размер шрифта от 1 до 7. Например, в визуальной части текст <font size="4">medium</font> соответствует коду: <code>&lt;font size=&quot;4&quot;&gt;medium&lt;/font&gt;</code></p></td></tr>
</tbody>
</table></div>
 

 
<h4>Кнопки форматирования</h4>
 
<p>Рассмотрим, с помощью каких тегов реализуется различное написание текста.</p>
 
<table cellspacing="0" cellpadding="0" border="0"> 
  <tbody> 
    <tr><td bgcolor="#000000"> 
        <table cellspacing="1" cellpadding="6" border="0"> 
          <tbody> 
            <tr><td bgcolor="#ffffff" align="center" colspan="2"><b>Кнопка</b></td><td bgcolor="#ffffff" align="center"><b>Текст</b></td><td bgcolor="#ffffff" align="center"><b>Теги</b></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res62/TKjuv.S5JD6.bold.gif" border="0" height="22" width="23"  /></td><td bgcolor="#ffffff"><strong>Жирный</strong></td><td bgcolor="#ffffff"><code>&lt;strong&gt;Жирный&lt;/strong&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res62/lgF9R.Qg9Sl.italic.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"><em>Курсив</em></td><td bgcolor="#ffffff"><code>&lt;em&gt;Курсив&lt;/em&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center" colspan="2"><img src="cid:resources/res62/MWacp.lPz4F.under.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"><u>Подчеркнутый</u></td><td bgcolor="#ffffff"><code>&lt;u&gt;Подчеркнутый&lt;/u&gt;</code></td></tr>
           </tbody>
         </table>
       </td></tr>
   </tbody>
 </table>
 
<p>Кнопка <img src="cid:resources/res62/giqii.sYdox.removeformat.gif" border="0" height="20" width="20"  /> удаляет текстовое форматирование, т.е. удаляет тег <b>&lt;font&gt;</b> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.</p>
 
<p>Кнопка <img src="cid:resources/res62/eSy8Y.T0BOE.hr.gif" border="0" height="20" width="20"  /> позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <b>&lt;hr&gt;</b></p>
 
<p>Кнопка <img src="cid:resources/res62/7eIaH.qCCc2.optimize_html.png" border="0" height="22" width="22"  /> <b>Оптимизировать HTML-код</b> убирает пустые HTML-теги. 
  <br />
 Список убираемых пустых тегов: <b>b</b>, <b>em</b>, <b>font</b>, <b>h1</b>, <b>h2</b>, <b>h3</b>, <b>i</b>, <b>li</b>, <b>ol</b>, <b>p</b>, <b>small</b>, <b>span</b>, <b>strong</b>, <b>u</b>, <b>ul</b> и т.д. 
</p>
 
<h4>Выравнивание текста</h4>
 
<table cellspacing="0" cellpadding="0" border="0"> 
  <tbody> 
    <tr><td bgcolor="#000000"> 
        <table cellspacing="1" cellpadding="6" border="0"> 
          <tbody> 
            <tr><td bgcolor="#ffffff" align="center"><b>Кнопка</b></td><td bgcolor="#ffffff" align="center"><b>Текст</b></td><td bgcolor="#ffffff" align="center"><b>Теги</b></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res62/m2eEG.RLrs0.left.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"> 
                <p align="left">По левому краю</p>
               </td><td bgcolor="#ffffff"><code>&lt;p align=&quot;left&quot;&gt;По левому краю&lt;/p&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res62/ljOWN.UkgMf.right.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"> 
                <p align="right">По правому краю</p>
               </td><td bgcolor="#ffffff"><code>&lt;p align=&quot;right&quot;&gt;По правому краю&lt;/p&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res62/HR7hR.8Mad0.center.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"> 
                <p align="center">По центру</p>
               </td><td bgcolor="#ffffff"><code>&lt;p align=&quot;center&quot;&gt;По центру&lt;/p&gt;</code></td></tr>
           
            <tr><td bgcolor="#ffffff" align="center"><img src="cid:resources/res62/mbmqr.e6aZM.justify.gif" border="0" height="20" width="20"  /></td><td bgcolor="#ffffff"> 
                <p align="justify">Выравниваем по ширине</p>
               </td><td bgcolor="#ffffff"><code>&lt;p align=&quot;justify&quot;&gt;Выравниваем по ширине&lt;/p&gt;</code></td></tr>
           </tbody>
         </table>
       </td></tr>
   </tbody>
 </table>
 
<h4>Списки элементов</h4>
 
<p>В визуальном редакторе есть возможность создать два вида списков: нумерованный и маркированный. Первый вариант создается с помощью кнопки <img src="cid:resources/res62/ZE9PQ.NcVHK.numlist.gif" border="0" height="22" width="23"  /> и выглядит так:</p>
 
<ol> 
  <li>первый </li>
 
  <li>второй </li>
 
  <li>третий </li>
 </ol>


<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Нумерованный список при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax">&lt;ol&gt;<br />  &lt;li&gt;первый &lt;/li&gt;<br />  &lt;li&gt;второй &lt;/li&gt;<br />  &lt;li&gt;третий &lt;/li&gt;<br />&lt;/ol&gt;<br /></pre></td></tr>
</tbody>
</table></div>
 
<p>Второй вид, маркированный список, создается с помощью кнопки <img src="cid:resources/res62/V4umg.wWGtj.bullist.gif" border="0" height="20" width="20"  /> и выглядит так:</p>
 
<ul> 
  <li>первый </li>
 
  <li>второй </li>
 
  <li>третий </li>
 </ul>
 
<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Маркированный список при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td>
<pre class="syntax">&lt;ul&gt;<br />  &lt;li&gt;первый &lt;/li&gt;<br />  &lt;li&gt;второй &lt;/li&gt;<br />  &lt;li&gt;третий &lt;/li&gt;<br />&lt;/ul&gt;<br /></pre></td></tr>
</tbody>
</table></div>


 
<h4>Сдвиг текста</h4>
 
<p>В редакторе есть возможность увеличить отступ от края с помощью кнопки <img src="cid:resources/res62/WwKeJ.POMSs.inindent.gif" border="0" height="22" width="23"  />, а затем его можно уменьшить с помощью кнопки <img src="cid:resources/res62/aSrkE.yj9Pf.deindent.gif" border="0" height="22" width="23"  />. </p>

<div class="learnin-post-text">
<table class="learning-spoiler">
<thead onclick="LearningInitSpoiler(this)">
<tr><th>
<div>Сдвиг текста вправо при редактировании в режиме кода</div>
</th></tr></thead>
<tbody style="display:none;" class="learning-spoiler">
<tr><td><pre class="syntax">&lt;blockquote dir=&quot;ltr&quot; style=&quot;MARGIN-RIGHT: 0px&quot;&gt;<br />  &lt;p&gt;ТЕКСТ&lt;/p&gt;<br />&lt;/blockquote&gt;<br /></pre></td></tr>
</tbody>
</table></div>

<p>Кнопка <img src="cid:resources/res62/jk8KF.5Yw3u.deindent.gif" border="0" height="22" width="23"  /> сдвигает текст влево и убирает из кода тег <code>&lt;blockquote&gt;</code></p>
 
<div class="hint"><b>Примечание</b>: в визуальном редакторе в области <b>Свойства</b> есть возможность просматривать и редактировать свойства того объекта, на котором установлен курсор мыши в данный момент. Для разных объектов набор свойств не одинаков. Например, для текста в панели <b>Свойства</b> представлены такие параметры: 
  <p><img src="cid:resources/res62/E8kzV.XWylf.text_props.png" border="0" height="135" width="584" alt="Свойства текста"  /></p>
 
  <br />
 Если выделено изображение, то: 
  <br />
 
  <p><img src="cid:resources/res62/Lir8d.6tTDk.img_props.png" border="0" height="148" width="596" alt="Свойства изображения"  /></p>
 
  <br />
 А если выделить ссылку в рабочей области, то в <b>Свойствах</b> отобразится следующее: 
  <br />
 
  <p><img src="cid:resources/res62/Po7Us.WYLlt.link_props.png" border="0" height="140" width="595" alt="Свойства ссылки"  /></p>
 </div>
 
<p> Ниже вы можете познакомиться с видео-роликами, наглядно показывающим различные средства форматирования текста.</p>
 
<p>1. (3 минуты 24 секунды, 15.45 Мб.) </p>
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_109821" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res62/YIZxa.tNeUv.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_109821" menu="true" wmode="transparent" width="800" height="620" flashvars="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-1.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object> 
<p><a href="http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-1.flv" >Загрузить</a> ролик.</p>
 
<br />
 
<p>2. (3 минуты 14 секунд, 9.78 Мб.) </p>
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="bxid_33986" width="800" height="620" ><param name="movie" value="/bitrix/components/bitrix/player/mediaplayer/player"><param name="menu" value="true"><param name="wmode" value="transparent"><param name="width" value="800"><param name="height" value="620"><param name="flashvars" value="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true"><embed src="cid:resources/res62/dDxOa.b6Tla.player" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" id="bxid_33986" menu="true" wmode="transparent" width="800" height="620" flashvars="file=http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-2.flv&logo.hide=true&skin=/bitrix/components/bitrix/player/mediaplayer/skins/bitrix.swf&repeat=N&bufferlength=10&dock=true" /></object> 
<p><a href="http://dev.1c-bitrix.ru/download/files/video/learning/teachvideo/6-2.flv" >Загрузить</a> ролик.</p>
]]></detail_text>
<detail_picture></detail_picture>
<detail_text_type>html</detail_text_type>
<launch></launch>
<code></code>
<active_from></active_from>
<active_to></active_to>
<rating></rating>
<rating_type></rating_type>
<scorm></scorm>
<linked_lesson_id></linked_lesson_id>
<course_id></course_id>
<course_sort></course_sort>
<edge_sort>100</edge_sort>
<id>932</id>
</content>